<template>
  <div style="background-color: #fff">
<!--    <div style="position: sticky;top: 0;z-index: 99">-->
<!--      <Myheader></Myheader>-->
<!--    </div>-->
    <div class="page">
      <h2 style="text-align: center;margin: 12px 0;">同学介绍</h2>
      <div class="headerInfo">
        <img
          :src="`http://localhost:8087/dev-api${studentInfo.benrenzhaopian}`"
          alt=""
        />
        <div class="textInfo">
          <div class="introduceInfo">
            <el-descriptions :title="studentInfo.xingming" column="1">
              <el-descriptions-item label="班级名称：">{{
                studentInfo.banjimingcheng
              }}</el-descriptions-item>
              <el-descriptions-item label="学号：">{{
                studentInfo.xuehao
              }}</el-descriptions-item>
              <el-descriptions-item label="学生类别：">{{
                studentInfo.xueshengleibie
              }}</el-descriptions-item>
              <el-descriptions-item label="入学年份：">{{
                studentInfo.ruxuenianfen
              }}</el-descriptions-item>
              <el-descriptions-item label="毕业年份：">{{
                studentInfo.biyenianfen
              }}</el-descriptions-item>

            </el-descriptions>
          </div>
        </div>
      </div>

      <div class="mainInfo">
        <h4>就业单位</h4>

        <div class="mainInfo-text">
          {{ studentInfo.jiuyedanwei }}
        </div>
        <el-divider></el-divider>
      </div>

      <div class="mainInfo">
        <h4>职位/职级</h4>

        <div class="mainInfo-text">
          {{ studentInfo.zhiji }}
        </div>
        <el-divider></el-divider>
      </div>
      <div class="mainInfo">
        <h4>在校荣誉</h4>

        <div class="mainInfo-text">
          {{ studentInfo.zaixiaorongyu }}
        </div>
        <el-divider></el-divider>
      </div>
      <div class="mainInfo">
        <h4>个人履历</h4>

        <div class="mainInfo-text">
          {{ studentInfo.zhuyaoshiji }}
        </div>
        <el-divider></el-divider>
      </div>

    </div>
<!--    <div>-->
<!--      <MyBottom></MyBottom>-->
<!--    </div>-->
  </div>
</template>

<script>
import Myheader from "./header.vue";
import MyBottom from "./bottom.vue";
import { getStudent } from "@/api";
export default {
  name: "alumnus",
  data() {
    return {
      studentInfo: []
    };
  },
  components: {
    Myheader,
    MyBottom
  },
  mounted() {
    getStudent({ xuehao: this.$route.query.xuehao })
      .then(res => {
        this.studentInfo = res.data[0];
        console.log("this.studentInfo: ", this.studentInfo);
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>

<style scoped>
.page {
  padding: 10px 50px;

  .headerInfo {
    padding-top: 12px;
    position: relative;
    width: 100%;
    height: 250px;
    background-color: #f5f5f5;
    img {
      height: 200px;
      width: 150px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .textInfo {
      margin-left: 180px;

      .introduceInfo {
        color: #999999;
      }
    }
  }

  .mainInfo {
    padding: 20px 0;
    .mainInfo-text {
      padding: 10px 0 0;
      color: #757575;
    }
  }
}
/deep/ .el-descriptions__body {
  background-color: #f5f5f5 !important;
}
</style>
